<template>
    <div class="register grid-content bg-purple">
        <el-form
            ref="resetPasswordForm"
            :model="resetPasswordForm"
            status-icon
            :rules="rules"
            label-width="100px"
            class="demo-resetPasswordForm"
        >
            <el-form-item label="用户名" prop="username">
                <el-input v-model="resetPasswordForm.username" />
            </el-form-item>
            <el-form-item label="验证码" prop="validateCode">
                <input v-model="validateCode" placeholder="请输入验证码" />&nbsp;
                <button type="button" @click="sendCode">{{ sendCodeButton }}</button>
            </el-form-item>
            <el-form-item label="新密码" prop="pwd">
                <el-input v-model="resetPasswordForm.pwd" type="password" autocomplete="off" />
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
                <el-input v-model="resetPasswordForm.checkPass" type="password" autocomplete="off" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('resetPasswordForm')">修改</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import request from "@/utils/request";
export default {
    name: "Register",
    data() {
        var checkUserName = (rule, value, callback) => {
            if (!value) {
                return callback(new Error("用户名不能为空"));
            }
            callback();
        };
        var validatePass = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入密码"));
            } else {
                if (this.resetPasswordForm.checkPass !== "") {
                    this.$refs.resetPasswordForm.validateField("checkPass");
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请再次输入密码"));
            } else if (value !== this.resetPasswordForm.pwd) {
                callback(new Error("两次输入密码不一致!"));
            } else {
                callback();
            }
        };
        return {
            resetPasswordForm: {
                pwd: "",
                checkPass: "",
                username: "",
            },
            validateCode: "",
            rules: {
                pwd: [{ validator: validatePass, trigger: "blur" }],
                checkPass: [{ validator: validatePass2, trigger: "blur" }],
                username: [{ validator: checkUserName, trigger: "blur" }],
            },
            sendCodeButton: "发送验证码",
            mobileCode: "",
            userMobile: "",
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (
                        this.mobileCode !== this.validateCode ||
                        this.validateCode == ""
                    ) {
                        this.$message.error("验证码错误!");
                        return;
                    }
                    // 修改密码
                    request({
                        url: "/rest/user/resetPwd",
                        data: {
                            user: this.resetPasswordForm.username,
                            pwd: this.resetPasswordForm.pwd,
                        },
                        method: "post",
                    })
                        .then((res) => {
                            console.log(res);
                            if (res.status) {
                                this.$message({
                                    message: "修改成功!",
                                    type: "success",
                                    center: true,
                                });
                                this.$router.push({ path: "/" });
                            } else {
                                this.$message.error(res.message);
                                return;
                            }
                        })
                        .catch((e) => {
                            console.error(e);
                        });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        sendCode() {
            // 查询用户绑定手机号
            request({
                url: "/rest/user/query",
                data: { user: this.resetPasswordForm.username },
                method: "post",
            })
                .then((res) => {
                    // console.log(res)
                    if (res.status) {
                        this.userMobile = res.data.mobile;
                        // 计时器
                        let second = 60;
                        const timer = setInterval(() => {
                            second -= 1;
                            if (second > 0) {
                                this.sendCodeButton =
                                    "已向" +
                                    this.userMobile.substr(0, 4) +
                                    "...发送验证码(" +
                                    second +
                                    ")";
                            } else {
                                this.sendCodeButton = "发送验证码";
                                clearInterval(timer);
                            }
                        }, 1000);

                        // send mobile code
                        request({
                            url: "/rest/user/code",
                            data: { mobile: this.userMobile },
                            method: "post",
                        })
                            .then((res) => {
                                // console.log(res)
                                if (res.status) {
                                    this.mobileCode = res.data;
                                } else {
                                    this.$message.error(res.message);
                                    return;
                                }
                            })
                            .catch((e) => {
                                console.error(e);
                            });
                    } else {
                        this.$message.error(res.message);
                        return false;
                    }
                })
                .catch((e) => {
                    console.error(e);
                });
        },
    },
};
</script>
<style scoped>
.register {
    margin: 0px auto;
    width: 30%;
}
.register form {
    margin-top: 25vh;
}
.el-form-item__content {
    display: flex;
}
</style>
